import React from 'react';
import styles from './tabsNav.css';
import tabNavList from './tabNavJson';

const tabsNav = ({
  onSelected=()=>{},
  selectedIndex=0,
}) => {

  const tabsList = tabNavList.tabNavJson()

  return(
    <div className={styles.tabsNavBody}>
      {tabsList.map((item,index) =>{
        let itemClass = [`${styles.tabItem}`,`${styles.textColor}`];
        if(selectedIndex == index){
          itemClass.length = 0;
          itemClass.push(`${styles.tabItem}`)
          itemClass.push(`${styles.textColorSelected}`)
        }
        return (
          <div key={item.id.toString()}
            className={itemClass.join(' ')}
            onClick={() => onSelected(item.selectedIndex)}>
            <span>{item.label}</span>
          </div>
        )
      })}
    </div>
  )
}

export default tabsNav;
